import { useLanguage } from '../contexts/LanguageContext';
import { Globe, Zap, Shield, Users, Award, Target } from 'lucide-react';

const About = () => {
  const { language } = useLanguage();

  const isZhCN = language === 'zh-CN';

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 dark:from-gray-900 dark:to-gray-800">
      {/* Hero Section */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h1 className="text-5xl font-bold mb-6 text-gray-900 dark:text-white">
              {isZhCN ? '关于 kernelProxy' : 'About kernelProxy'}
            </h1>
            <p className="text-xl text-gray-600 dark:text-gray-300 mb-8">
              {isZhCN 
                ? '全球领先的IPv6代理服务提供商，致力于为企业提供高性能、高可用的代理解决方案'
                : 'Leading global IPv6 proxy service provider, dedicated to delivering high-performance, highly available proxy solutions for enterprises'}
            </p>
          </div>
        </div>
      </section>

      {/* Mission Section */}
      <section className="py-16 bg-white dark:bg-gray-800">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-3xl font-bold mb-8 text-center text-gray-900 dark:text-white">
              {isZhCN ? '我们的使命' : 'Our Mission'}
            </h2>
            <p className="text-lg text-gray-700 dark:text-gray-300 text-center mb-12">
              {isZhCN
                ? 'kernelProxy致力于打造全球最可靠的IPv6代理网络，通过创新技术和优质服务，帮助企业突破数据获取障碍，实现业务增长。我们相信，高质量的代理服务是数字化时代企业成功的关键基础设施。'
                : 'kernelProxy is committed to building the world\'s most reliable IPv6 proxy network. Through innovative technology and premium services, we help enterprises overcome data acquisition barriers and achieve business growth. We believe that high-quality proxy services are the key infrastructure for enterprise success in the digital age.'}
            </p>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="text-center">
                <div className="inline-flex items-center justify-center w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full mb-4">
                  <Target className="w-8 h-8 text-blue-600 dark:text-blue-400" />
                </div>
                <h3 className="text-xl font-semibold mb-2 text-gray-900 dark:text-white">
                  {isZhCN ? '创新驱动' : 'Innovation Driven'}
                </h3>
                <p className="text-gray-600 dark:text-gray-400">
                  {isZhCN
                    ? '持续投入研发，采用最新的内核级优化技术'
                    : 'Continuous R&D investment with latest kernel-level optimization'}
                </p>
              </div>

              <div className="text-center">
                <div className="inline-flex items-center justify-center w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full mb-4">
                  <Users className="w-8 h-8 text-blue-600 dark:text-blue-400" />
                </div>
                <h3 className="text-xl font-semibold mb-2 text-gray-900 dark:text-white">
                  {isZhCN ? '客户至上' : 'Customer First'}
                </h3>
                <p className="text-gray-600 dark:text-gray-400">
                  {isZhCN
                    ? '7x24小时技术支持，确保客户业务稳定运行'
                    : '24/7 technical support ensuring stable business operations'}
                </p>
              </div>

              <div className="text-center">
                <div className="inline-flex items-center justify-center w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full mb-4">
                  <Award className="w-8 h-8 text-blue-600 dark:text-blue-400" />
                </div>
                <h3 className="text-xl font-semibold mb-2 text-gray-900 dark:text-white">
                  {isZhCN ? '追求卓越' : 'Pursue Excellence'}
                </h3>
                <p className="text-gray-600 dark:text-gray-400">
                  {isZhCN
                    ? '99.9%的服务可用性，业界领先的性能表现'
                    : '99.9% service availability with industry-leading performance'}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Core Values */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="max-w-6xl mx-auto">
            <h2 className="text-3xl font-bold mb-12 text-center text-gray-900 dark:text-white">
              {isZhCN ? '核心优势' : 'Core Advantages'}
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
                <div className="flex items-center mb-4">
                  <Globe className="w-8 h-8 text-blue-600 dark:text-blue-400 mr-3" />
                  <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
                    {isZhCN ? '全球覆盖' : 'Global Coverage'}
                  </h3>
                </div>
                <p className="text-gray-600 dark:text-gray-400">
                  {isZhCN
                    ? '覆盖全球50+国家和地区，1000万+优质IPv6代理IP池，满足各类业务场景需求。'
                    : 'Coverage across 50+ countries and regions with 10M+ premium IPv6 proxy IPs, meeting diverse business needs.'}
                </p>
              </div>

              <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
                <div className="flex items-center mb-4">
                  <Zap className="w-8 h-8 text-blue-600 dark:text-blue-400 mr-3" />
                  <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
                    {isZhCN ? '极致性能' : 'Ultimate Performance'}
                  </h3>
                </div>
                <p className="text-gray-600 dark:text-gray-400">
                  {isZhCN
                    ? '内核级优化技术，毫秒级响应速度，支持高并发请求，确保业务高效运行。'
                    : 'Kernel-level optimization with millisecond response time and high concurrency support for efficient operations.'}
                </p>
              </div>

              <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
                <div className="flex items-center mb-4">
                  <Shield className="w-8 h-8 text-blue-600 dark:text-blue-400 mr-3" />
                  <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
                    {isZhCN ? '安全可靠' : 'Secure & Reliable'}
                  </h3>
                </div>
                <p className="text-gray-600 dark:text-gray-400">
                  {isZhCN
                    ? '企业级安全防护，严格的隐私保护政策，99.9%的服务可用性保证。'
                    : 'Enterprise-grade security protection with strict privacy policy and 99.9% service availability guarantee.'}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-16 bg-gradient-to-r from-blue-600 to-cyan-600 dark:from-blue-800 dark:to-cyan-800">
        <div className="container mx-auto px-4">
          <div className="max-w-6xl mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-8 text-center text-white">
              <div>
                <div className="text-4xl font-bold mb-2">10M+</div>
                <div className="text-lg opacity-90">
                  {isZhCN ? '代理IP池' : 'Proxy IPs'}
                </div>
              </div>
              <div>
                <div className="text-4xl font-bold mb-2">50+</div>
                <div className="text-lg opacity-90">
                  {isZhCN ? '国家/地区' : 'Countries'}
                </div>
              </div>
              <div>
                <div className="text-4xl font-bold mb-2">99.9%</div>
                <div className="text-lg opacity-90">
                  {isZhCN ? '服务可用性' : 'Uptime'}
                </div>
              </div>
              <div>
                <div className="text-4xl font-bold mb-2">24/7</div>
                <div className="text-lg opacity-90">
                  {isZhCN ? '技术支持' : 'Support'}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Team Section */}
      <section className="py-16 bg-white dark:bg-gray-800">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl font-bold mb-8 text-gray-900 dark:text-white">
              {isZhCN ? '我们的团队' : 'Our Team'}
            </h2>
            <p className="text-lg text-gray-700 dark:text-gray-300 mb-8">
              {isZhCN
                ? 'kernelProxy团队由来自全球顶尖互联网公司的资深工程师组成，拥有丰富的网络技术和代理服务经验。我们专注于技术创新，致力于为客户提供最优质的服务体验。'
                : 'The kernelProxy team consists of senior engineers from top global internet companies with extensive experience in network technology and proxy services. We focus on technological innovation and are committed to providing customers with the best service experience.'}
            </p>
          </div>
        </div>
      </section>

      {/* Contact CTA */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto bg-gradient-to-r from-blue-600 to-cyan-600 dark:from-blue-800 dark:to-cyan-800 rounded-2xl p-12 text-center text-white">
            <h2 className="text-3xl font-bold mb-4">
              {isZhCN ? '准备开始使用？' : 'Ready to Get Started?'}
            </h2>
            <p className="text-lg mb-8 opacity-90">
              {isZhCN
                ? '立即注册，体验kernelProxy的强大功能'
                : 'Sign up now and experience the power of kernelProxy'}
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <button className="px-8 py-3 bg-white text-blue-600 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
                {isZhCN ? '免费试用' : 'Free Trial'}
              </button>
              <button className="px-8 py-3 bg-transparent border-2 border-white text-white rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition-colors">
                {isZhCN ? '联系我们' : 'Contact Us'}
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default About;
